<!--  -->
<script lang="ts" setup>
import {} from 'vue'
</script>

<template>
  <div class="container">
    <h1>线性渐变</h1>
    <div class="exampleA">
      <div class="example1">从上到下</div>
      <div class="example2">从下到上</div>
      <div class="example3">从左到右</div>
      <div class="example4">从右到左</div>
      <div class="example5">对角：从左上到右下</div>
      <div class="example6">deg：从任意角度开始</div>
      <div class="example7">不均匀分布(第一个颜色不要占比)</div>
      <div class="example8">重复渐变</div>
    </div>
    <h1>径向渐变</h1>
    <div class="exampleB">
      <div class="example1">均匀分布</div>
      <div class="example2">不均匀分布(第一个颜色不要占比)</div>
      <div class="example3">圆形径向分布(默认椭圆)</div>
      <div class="example4">closest-side</div>
      <div class="example5">farthest-side</div>
      <div class="example6">closest-corner</div>
      <div class="example7">farthest-corner</div>
      <div class="example8">重复渐变</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  text-align: center;
  .exampleA {
    width: 100%;
    display: flex;
    div {
      height: 200px;
      margin-left: 10px;
      flex: 1;
    }
    .example1 {
      background-image: linear-gradient(yellow, pink, rgb(0, 255, 255));
    }
    .example2 {
      background-image: linear-gradient(to top, yellow, pink, rgb(0, 255, 255));
    }
    .example3 {
      background-image: linear-gradient(
        to right,
        yellow,
        pink,
        rgb(0, 255, 255)
      );
    }
    .example4 {
      background-image: linear-gradient(
        to left,
        yellow,
        pink,
        rgb(0, 255, 255)
      );
    }
    .example5 {
      background-image: linear-gradient(
        to bottom right,
        yellow,
        pink,
        rgb(0, 255, 255)
      );
    }
    .example6 {
      background-image: linear-gradient(60deg, yellow, pink, rgb(0, 255, 255));
    }
    .example7 {
      background-image: linear-gradient(
        yellow 5%,
        pink 30%,
        rgb(0, 255, 255) 75%
      );
    }
    .example8 {
      background-image: repeating-linear-gradient(
        yellow,
        pink 10%,
        rgb(0, 255, 255) 30%
      );
    }
  }
  .exampleB {
    width: 100%;
    display: flex;
    div {
      height: 200px;
      margin-left: 10px;
      flex: 1;
    }
    .example1 {
      background-image: radial-gradient(yellow, pink, rgb(0, 255, 255));
    }
    .example2 {
      background-image: radial-gradient(yellow, pink 20%, rgb(0, 255, 255) 60%);
    }
    .example3 {
      background-image: radial-gradient(circle, yellow, pink, rgb(0, 255, 255));
    }
    .example4 {
      background-image: radial-gradient(
        closest-side at 80% 75%,
        yellow,
        pink,
        rgb(0, 255, 255)
      );
    }
    .example5 {
      background-image: radial-gradient(
        farthest-side at 60% 55%,
        yellow,
        pink,
        rgb(0, 255, 255)
      );
    }
    .example6 {
      background-image: radial-gradient(
        closest-corner at 60% 55%,
        yellow,
        pink,
        rgb(0, 255, 255)
      );
    }
    .example7 {
      background-image: radial-gradient(
        farthest-corner at 60% 55%,
        yellow,
        pink,
        rgb(0, 255, 255)
      );
    }
    .example8 {
      background-image: repeating-radial-gradient(
        yellow,
        pink 10%,
        rgb(0, 255, 255) 20%
      );
    }
  }
}
</style>
